<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet/less" type="text/css" href="hehe.less"/>
    <script  src="less.1.7.4.js"  type="text/javascript"></script>
    <script src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div class="Box">
    <div class="box1">
        <div>
            <button id="ks" onclick="ks()" style="margin-right: 30px">开始游戏</button>
            <button onclick="js()">结束游戏</button>
        </div>

        <form name="form1" id="form1">
            <div>
                <label>分数：</label>
                <input type="text" name="fraction" style="border: 0;" readonly/>
                <label>倒计时：</label>
                <input type="text" name="remtime" style="border: 0;" readonly/>
            </div>
        </form>

        <div id="divbox" style="width: 100%;background-color: #255625;height: 350px">
            <table class="table">
                <tr>
                    <td id="td0" onclick="dj(0)"></td>
                    <td id="td1" onclick="dj(1)"></td>
                    <td id="td2" onclick="dj(2)"></td>
                    <td id="td3" onclick="dj(3)"></td>
                    <td id="td4" onclick="dj(4)"></td>
                </tr>
                <tr>
                    <td id="td5" onclick="dj(5)"></td>
                    <td id="td6" onclick="dj(6)"></td>
                    <td id="td7" onclick="dj(7)"></td>
                    <td id="td8" onclick="dj(8)"></td>
                    <td id="td9" onclick="dj(9)"></td>
                </tr>
                <tr>
                    <td id="td10" onclick="dj(10)"></td>
                    <td id="td11" onclick="dj(11)"></td>
                    <td id="td12" onclick="dj(12)"></td>
                    <td id="td13" onclick="dj(13)"></td>
                    <td id="td14" onclick="dj(14)"></td>
                </tr>
            </table>
        </div>

        <div id="ts">你好棒！</div>

        <div class="divover"></div>
    </div>

    <div class="box2">
        <h1>排名榜</h1>
        <table class="table2" cellpadding="0" cellspacing="0">
            <tr>
                <td>排名</td>
                <td>名字</td>
                <td style="border-right: 0">分数</td>
            </tr>
            <tr>
                <td>1</td>
                <td class="tdname"></td>
                <td style="border-right: 0" class="tdfs"></td>
            </tr>
            <tr>
                <td>2</td>
                <td class="tdname"></td>
                <td style="border-right: 0" class="tdfs"></td>
            </tr>
            <tr>
                <td>3</td>
                <td class="tdname"></td>
                <td style="border-right: 0" class="tdfs"></td>
            </tr>
            <tr>
                <td>4</td>
                <td class="tdname"></td>
                <td style="border-right: 0" class="tdfs"></td>
            </tr>
            <tr>
                <td>5</td>
                <td class="tdname"></td>
                <td style="border-right: 0" class="tdfs"></td>
            </tr>
            <tr>
                <td>6</td>
                <td class="tdname"></td>
                <td style="border-right: 0" class="tdfs"></td>
            </tr>
            <tr>
                <td>7</td>
                <td class="tdname"></td>
                <td style="border-right: 0" class="tdfs"></td>
            </tr>
            <tr>
                <td>8</td>
                <td class="tdname"></td>
                <td style="border-right: 0" class="tdfs"></td>
            </tr>
            <tr>
                <td>9</td>
                <td class="tdname"></td>
                <td style="border-right: 0" class="tdfs"></td>
            </tr>
            <tr>
                <td>10</td>
                <td class="tdname"></td>
                <td style="border-right: 0" class="tdfs"></td>
            </tr>
        </table>
    </div>
</div>


<script>
    var he=0;
    var fraction = 0;
    var djs = 60;
    var set1,set2,set3;
    //游戏开始
    function ks(){
        he=1;
        $("#ks").hide();
        document.form1.fraction.value = fraction;
        imgxs();
        timexs();
    }
    //游戏结束
    function js(){
        if(he==1){
            document.form1.fraction.value = " ";
            document.form1.remtime.value = " ";
            $("#ks").show();
            $("td").text(" ");
            alert("游戏结束！你的分数为："+fraction);
            he=0;
            djs = 60;
            fraction = 0;
//            $.ajax({
//                type:"get",
//                url:"/gameover",
//                data:{
//                    user:user
//                },
//                success:function(dt){
//                    if(dt.node==1){
//                        localStorage.setItem("colorRunuser",dt.user[0].user);
//                        $("#inputBox").hide();
//                    }
//                }
//            })
        }else{
            console.log("错误")
        }
    }
    //点击事件
    function dj(a){
        if(he == 1){
            document.form1.fraction.value = fraction;
            if(document.getElementById("td"+a).innerHTML != ""){
                fraction += 1;
                $("#ts").show();
                setTimeout(function(){
                    $("#ts").hide();
                },300);
                document.getElementById("td"+a).innerHTML = "";
            }
        }
    }
    //显示倒计时时间
    function timexs(){
        clearInterval(set1);
        if(he==1){
            if(djs==0){
                js();
            }else{
                djs-=1;
                set1 = setInterval("timexs()",1000);
                document.form1.remtime.value = djs;
            }
        }
    }
    //显示图片
    function imgxs(){
        clearInterval(set2);
        clearInterval(set3);
        if(he==1){
            function hehe(){
                var a = document.getElementById("td"+aa);
                a.innerHTML = "";
            }
            var aa = Math.floor(Math.random()*14);
            document.getElementById("td"+aa).innerHTML = '<img src="1.png" draggable="false">';
            set2 = setInterval("imgxs()",1300);
            set3 = setTimeout(hehe,1000);
        }
    }
</script>
</body>
</html>